<template>
	<view>	
	<view class="card-modular" v-if="daily">
		<view class="title">多日预报</view>		
		<view class="card-wrap" style="background-color:#F5F5F5;opacity: 0.9;">				
			<block v-for="(item, index) in daily" :key="index" >	
				<view class="item daily">
					<view>{{ item.dateToString }}					
					</view>
					<view class="text-gray"style="margin-bottom: -20px;font-size: 13px;">{{ item.date }}</view>
					<image class="icon" :src="`/static/icons/${item.iconDay}.svg`"></image>
					<view class="text-primary"style="margin-top: -20px;">{{ item.tempMin }}°~{{ item.tempMax }}°C</view>
					<view style="margin-top: 5px;">{{ item.textDay }}</view>		
							<qiun-data-charts type="line":opts="opts" :chartData="chartData"/>
				</view>
				 
			</block>
			
		</view>
	</view>
	</view>
</template>

<script>
	const APIKEY = '7cc94edca9f74113adc43d1822d933c0' ;// 填入你申请的KEY
export default{
	data(){
		return{
			weatherData:[],
			user: uni.getStorageSync('weather2024'),
			currenttime:'',
			location: '',
			now: '',
			hourly: '',
			daily: '',
	     chartData:{}, //图标相关数据的存储
	     opts:{//图形基本配置
	              color:["#7699f3"], //主题颜色
	              padding:[15,0,5,0],//画布填充边距，顺序为上右下左
	             enableScroll:false,
	              legend:{//图例配置
	              show:false
	},
	   xAxis: {//X轴配置
	   disableGrid: true,//不绘制纵向网格(即默认绘制网格)
	  disabled: true,
	   axisLine:false
	   },
	    yAxis: {//Y轴配置
	  disabled: true,//不绘制Y轴
	  disableGrid: true,
	    type:'value',
		},
	   extra: {//区域图
	         line:{
				 
				 type:'curve',
				 width:2,
				 activeType:"hollow",
				 linearType:"custom",
				 onShadow:true,
				 animation:"horizontal"
			    }
	         }
	      },
	     }
	   },
	   onLoad() {
	   	this.getLocation();
	   	
	   	},
		mounted(){
			
			
		},
	 onReady() {
	     this.getServerData();
	      },
	methods:{
		
		
	     getServerData() {
			
	//模拟从服务器获取数据时的延时
	     setTimeout(() => {
	 //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
	             let option = {
	//图表数据集，部分图表类型不需要categories,一般设置在横轴上
	            categories: [],//
	            series: [{
					name:"",
					data:[res.daily[0].temp,res.daily[1].temp,res.daily[2].temp],
				} ],
				
				
				};
	 this.chartData = JSON.parse(JSON.stringify(option));
	      }, 500);
	   },
	   getLocation() {
	   	var that = this;
	   	uni.getLocation({
	   		type: 'gcj02',
	   		success(res) {
	   			that.location = res.longitude + ',' + res.latitude;
	   			that.getWeather();
	   			that.getCityByLoaction();
				
	   		},
	   		fail(err) {
	   			uni.showModal({
	   				title: '获取定位信息失败',
	   				content: '为了给您提供准确的天气预报服务,请在设置中授权【位置信息】',
	   				success(mRes) {
	   					if (mRes.confirm) {
	   						uni.openSetting({
	   							success: function (data) {
	   								if (data.authSetting['scope.userLocation'] === true) {
	   									uni.showToast({
	   										title: '授权成功',
	   										icon: 'success',
	   										duration: 1000
	   									});
	   									that.getLocation();
	   								} else {
	   									uni.showToast({
	   										title: '授权失败',
	   										icon: 'none',
	   										duration: 1000
	   									});
	   									that.location = '地理位置';
	   									that.getWeather();
	   									that.getCityByLoaction();
	   								}
	   							},
	   							fail(err) {
	   								console.log(err);
	   								uni.showToast({
	   									title: '唤起设置页失败，请手动打开',
	   									icon: 'none',
	   									duration: 1000
	   								});
	   								that.location = '地理位置';
	   								that.getWeather();
	   								that.getCityByLoaction();
	   							}
	   						});
	   					} else if (mRes.cancel) {
	   						that.location = '地理位置';
	   						that.getWeather();
	   						that.getCityByLoaction();
	   					}
	   				}
	   			});
	   		}
	   	});
	   },
	   /**
	    * 根据坐标获取城市信息
	    */
	   getCityByLoaction() {
	   	var that = this;
	   	uni.request({
	   		url:
	   			'https://geoapi.qweather.com/v2/city/lookup?key=' +
	   			APIKEY +
	   			'&location=' +
	   			that.location,
	   		success(result) {
	   			var res = result.data;
	   			if (res.code == '200') {
	   				var data = res.location[0];
	   				that.City = data.adm2;
	   				that.County = data.name;
	   			} else {
	   				uni.showToast({
	   					title: '获取城市信息失败',
	   					icon: 'none'
	   				});
	   			}
	   		}
	   	});
	   },
	   /**
	    * 获取天气
	    */
	   getWeather() {
	   	var that = this;
	   	uni.showLoading({
	   		title: '加载中'
	   	});
	   	uni.request({
	   		url:
	   			'https://devapi.qweather.com/v7/weather/now?key=' +
	   			APIKEY +
	   			'&location=' +
	   			that.location,
				
	   		success(result) {
	   			var res = result.data;
				
	   			that.now = res.now;
	   		}
	   	});
	   	uni.request({
	   		url:
	   			'https://devapi.qweather.com/v7/weather/24h?key=' +
	   			APIKEY +
	   			'&location=' +
	   			that.location,
	   		success(result) {
	   			var res = result.data;
				console.log(res);
	   			res.hourly.forEach(function (item) {
	   				item.time = that.formatTime(new Date(item.fxTime)).hourly;
	   			});
	   			that.hourly = res.hourly;
	   		}
	   	});
	   	uni.request({
	   		url:
	   			'https://devapi.qweather.com/v7/weather/7d?key=' +
	   			APIKEY +
	   			'&location=' +
	   			that.location,
	   		success(result) {
	   			var res = result.data;
			
	   			res.daily.forEach(function (item) {
	   				item.date = that.formatTime(new Date(item.fxDate)).daily;
	   				item.dateToString = that.formatTime(new Date(item.fxDate)).dailyToString;
	   			});
				
	   			that.daily = res.daily;
	   			uni.hideLoading();
				 
	   		},
			
	   	});
		
	   },
	   formatTime(date) {
	   	const year = date.getFullYear();
	   	const month = date.getMonth() + 1;
	   	const day = date.getDate();
	   	const hour = date.getHours();
	   	const minute = date.getMinutes();
	   	const second = date.getSeconds();
	   	const weekArray = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
	   	const isToday = date.setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0);
	   	return {
	   		hourly: [hour, minute].map(this.formatNumber).join(':'),
	   		daily: [month, day].map(this.formatNumber).join('-'),
	   		dailyToString: isToday ? '今天' : weekArray[date.getDay()]
	   	};
	   },
	   // 补零
	   formatNumber(n) {
	   	n = n.toString();
	   	return n[1] ? n : '0' + n;
	   }
	   
	}
}
</script>

<style>
	.charts-box {
	    width: 100%;
	    height: 300px;
	  }
	  .card-modular {
	  	padding: 0 30rpx;
	  	margin-top: 30rpx;
	  } 
	  .card-modular > .title {
	  	font-size: 40rpx;
	  	font-weight: bolder;
	  	position: relative;
	  	margin-left: 14rpx;
	  	margin-bottom: 16rpx;
	  	font-family: "Times New Roman", Times, serif;
	  } 
	  .card-modular > .title::before {
	  	content: '';
	  	position: absolute;
	  	left: -14rpx;
	  	top: 10rpx;
	  	bottom: 10rpx;
	  	width: 8rpx;
	  	border-radius: 10rpx;
	  	background-color: #2f80ed;		
	  }
	  .card-modular .card-wrap {
	  	width: 690rpx;
	  	border-radius: 18rpx;
	  	background-color: #ffffff;
	  	box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.2);
	  	overflow-x: auto;
	  	white-space: nowrap;
	  	font-family: "Times New Roman", Times, serif;
	  	font-weight: bolder;
	  } 
	  .card-modular .card-wrap .item {
	  	display: inline-flex;
	  	flex-direction: column;
	  	align-items: center;
	  	font-size: 28rpx;
	  	padding: 18rpx 0;
	  	
	  }
	  .card-modular .card-wrap .item.hourly {
	  	width: 138rpx;
	  }
	  .card-modular .card-wrap .item.daily {
	  	width: 172.5rpx;
	  }
	  .card-modular .card-wrap .item .icon {
	  	width: 60rpx;
	  	height: 60rpx;
	  	margin: 64rpx 0;
	  }
	   
	  .card-modular .card-wrap .item .text-gray {
	  	color: gray;
	  	
	   }
	  .card-modular .card-wrap .item .text-primary {
	  	color: #0000CD;
	  	font-size: 15px;
	  }
	  .p1{
	  	font-family: "Times New Roman", Times, serif;
	  	font-weight: bolder;
	  }
	  .title{
	  	 
	  		font-family: "Brush Script MT", "Lucida Handwriting", Cursive;
	  		font-weight: bolder;
	  		color: white;
	  		font-size: 30px;
	  			
	  	}
	  .title2{
	  		 
	  		font-family: "Brush Script MT", "Lucida Handwriting", Cursive;
	  		font-weight: bolder;
	  		color: white;
	  		font-size: 22px;
	  		display: flex;
	  		justify-content: center;
	  		align-items: center;
	  		}
	  .title4{
	  			 
	  		font-family: "Times New Roman", Times, serif;
	  		font-weight: bolder;
	  		color: white;
	  		font-size: 22px;
	  		display: flex;
	  		justify-content: center;
	  		align-items: center;
	  		}
	  .title1{
	  			font-family: "Times New Roman", Times, serif;
	  			font-weight: bolder;
	  			color: white;
	  			font-size: 15px;
	  			
	        }
	   .title3{
	  	  	 
	  	  			font-family:  "Times New Roman", Times, serif;
	  	  			font-weight: bolder;
	  	  			color: white;
	  	  			font-size: 35px;
	  	  			display: flex;
	  	  			justify-content: center;
	  	  			align-items: center;
	  				margin-top: 10px;
	  	  	}
	  .grid-item-box{
	  			display: flex;
	  			flex-direction: column;
	  			align-items: center;
	  			justify-content: center;
	  		}
	  .p1{
	  				font-family: "Brush Script MT", "Lucida Handwriting", Cursive;
	  				font-weight: bolder;
	  				
	  			}
	  			scroll-view{
	  				white-space: nowrap;
	  			}
	  ::-webkit-scrollbar{
	  				display: none;
	  				width: 0;
	  				height: 0;
	  				color: transparent;
	  			}
	  .nav-bar-wrap{
	  				display: flex;
	  				flex-flow: column wrap;
	  				height: 400rpx;
	  			}
	  .nav-bar-item{
	  				width: 1500rpx;
	  				display: flex;
	  				height: 170rpx;
	  				margin-top: 18rpx;
	  				position: relative;
	  			}
	  			
</style>